<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="${host_url}/css/app/common.css">
<link rel="stylesheet"  href="${host_url}/css/app/member_goods.css">
<link rel="stylesheet" href="${host_url}/css/app/swiper.min.css">
<script src="${host_url}/js/app/jquery.min.js"></script>
<title>会员升级</title>
<script type="text/javascript">

$(function(){
	 $("#cat_name_i").children(":first").addClass('active');   
});
/*跳往商品详情*/
function fn_goGoodDetail(good_id) {
	window.webkit.messageHandlers.ios_open_page.postMessage('ProductDetailViewController:::goodId->'+good_id);	
}
</script>
</head>
<body>
	<div class="main">
		<div class="goods-list-wrap">
			<div class="menu-topInner left" id="left">
				<ul class="menu-group" id="cat_name_i">
				 <c:forEach items="${goodList}" var="c">
					<li><p>${c.cat_name}</p></li>
				 </c:forEach>
				</ul>
			</div>
			<div class="goods-list right"  id="right">
				<ul class="">
					<c:forEach items="${goodList}" var="c">
						<li>
							<div class="">
								<c:forEach items="${c.goodList}" var="s">
									<c:if test="${'ios'==os}">
										<div class="" onclick="fn_goGoodDetail(${s.good_id})">
									</c:if>
							      	<c:if test="${'android'==os}">
										<div class="" onclick="android.startGoodsDetail(${s.good_id})">
									</c:if>
										<p><img src="${s.img}" alt=""></p>
										<p class="goods-name">${s.name}</p>
										<c:if test="${s.ticket!=0 && s.member_price!=''}">
										<p class="price"><img src="/img/Vip.png" alt="" style="width:13px;"> &yen;${s.member_price}</p>
										</c:if>
										<c:if test="${s.ticket==0}">
										<p class="price"><img src="/img/Vip.png" alt="" style="width:13px;"> &yen;${s.default_price}</p>
										</c:if>
										<p class="vip-price">友米价&nbsp;&yen;${s.default_price}</p>
										<p style="font-size:12px;line-height:15px;padding:7px 0 0;display:block;">
										<c:if test="${s.promotion_item!=''}">
							              <span style="display:inline-block;border:1px solid #e31436;background:#e31436;color:#fff;border-radius:2px;padding:1px 3px 0;margin-right:3px;">${s.promotion_item}</span>
							            </c:if>
							            <c:if test="${s.limitedVO!=null && s.limitedVO.state=='1'}">
							              <span style="display:inline-block;border:1px solid #e31436;background:#e31436;color:#fff;border-radius:2px;padding:0 3px;">限时购</span>
							            </c:if>
							            </p>
									</div>
								</c:forEach>
							</div>
						</li>
					</c:forEach>
				</ul>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
		  $(function(){
			    $('.content').css('height',$('.right').height());
			    $('.left ul li').eq(0).addClass('active');

			    $('.left ul li').click(function(){
			        var i = $(this).index('.left ul li');
			        $('body, html').animate({scrollTop:$('.right ul li').eq(i).offset().top - 40},400);
			        console.log($(window).scrollTop());
			    });

			    $(window).scroll(function(){
			      console.log(2)
			      //滚动到标杆位置,左侧导航加active
			      $('.right ul li').each(function(){
			          var target = parseInt($(this).offset().top-$(window).scrollTop()-50);
			          var i = $(this).index();
			          if (target<=0) {
			            $('.left ul li').removeClass('active');
			            $('.left ul li').eq(i).addClass('active');
			          }
			      });
			      $('.left')[0].scrollLeft = $('.active')[0].offsetLeft;
			    });

			  var widths=0;
			  var ulwidth = document.getElementById("cat_name_i");
			  var arr = document.getElementsByTagName('ul')[0].children.length;
			  for(var i=0;i<arr;i++){
			      widths+= parseInt($('.left>ul>li').eq(i).width());
			      ulwidth.style.width = widths + arr * 60 + 'px';
			  }

			  });
	</script>
</body>
</html>